<script setup lang="ts">
import { ref} from 'vue'
import { getTime } from '@/utils/time';
import { baseImgPath } from '@/utils/env';
import { useDiary } from '@/hooks/diaryHook';
import { highlightKeyword } from '@/utils/searchHighlight';
const {  getWeatherUrl, parsePictures, getUrlList } = useDiary();


const props = defineProps({
    diarysList: {
        type: Array,
        default: () => [],
    },

    searchTerm: {
        type: String,
        default: '',
    },
})
// 随笔列表
const diarys = ref<any>(props.diarysList);

// 高亮处理函数
const getHighlightedText = (text: string, keyword: string) => {
    console.log(text, keyword);
    if (!keyword.trim()) return text;
    return highlightKeyword(text, keyword);
}
</script>

<template>
  <div class="px-8 py-6" v-for="item in diarys" :key="item.id">
                <!-- 内容标题 -->
                <div class="mb-6">
                    <h2 class="text-2xl font-bold text-gray-800" v-html="getHighlightedText(item.title, props.searchTerm)"></h2>

                </div>
                <!-- 日期和天气 -->
                <div class="flex items-center justify-between mb-6 text-sm text-gray-500">
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                            </path>
                        </svg>
                        {{ getTime(item.created_at) }}
                    </span>
                    <span class="flex items-center">
                        <img :src="getWeatherUrl(item.weather_id)" alt="天气" class="w-5 h-5" />
                    </span>
                </div>
                <!-- 内容主体 -->
                <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                    <div class="indent-8 underline underline-offset-4  px-8" v-html="getHighlightedText(item.content, props.searchTerm)">
                    </div>
                    <!-- 图片 -->
                    <div v-if="item.picture" class="mt-6 relative w-full">
                        <!-- 设置固定高度容器 -->
                        <div class="relative w-full h-[220px] group">
                            <div v-for="(img, index) in parsePictures(item.picture)" :key="img.id"
                                class="absolute w-[150px] h-[200px] transition-all duration-500 ease-out" :class="[
                                    index === 0 ? 'z-30 rotate-0' : '',
                                    index === 1 ? 'z-25 rotate-3 translate-x-2 translate-y-2' : '',
                                    index === 2 ? 'z-20 rotate-6 translate-x-4 translate-y-4' : '',
                                    index === 3 ? 'z-15 rotate-9 translate-x-6 translate-y-6' : '',
                                    'group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0',
                                    index === 0 ? 'group-hover:translate-x-0' : '',
                                    index === 1 ? 'group-hover:translate-x-[160px]' : '',
                                    index === 2 ? 'group-hover:translate-x-[320px]' : '',
                                    index === 3 ? 'group-hover:translate-x-[480px]' : '',
                                ]">
                                <!-- preview-teleported="true" : 将预览层直接挂载到 <body> 标签下，完全脱离原来的定位上下文 -->
                                <el-image :src="baseImgPath + '/' + img.url" alt=""
                                    class="w-full h-full object-cover rounded-lg shadow-xl border-2 border-white cursor-pointer"
                                    :zoom-rate="1.2" :max-scale="5" :min-scale="0.3"
                                    :preview-src-list="getUrlList(item.picture)" show-progress :initial-index="index"
                                    fit="cover" :preview-teleported="true" :z-index="9999" :hide-on-click-modal="false"
                                    preview-class="custom-image-preview">
                                </el-image>
                            </div>
                        </div>
                    </div>
                    <!-- 分割线 -->
                    <div v-if="item.id !== diarys[diarys.length - 1].id"
                        class="mt-8 border-t border-dashed  border-gray-300"></div>

                </div>
            </div>
</template>

<style scoped>

</style>
